<script setup>
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import { onMounted } from 'vue'

const props = defineProps({
  mapInit: {
    type: Function,
    default: () => { }
  }
})
let map = null
let sateLayer = null
let overLayer = null
const initMap = () => {
  // 创建地图实例，将其绑定到 id 参数为 "map" 的 DOM 元素上※
  map = L.map("map", {
    attributionControl: false,
    zoomControl: false
  });
  // 使用 setView() 方法设置地图中心点坐标（维度，经度）和初始缩放级别※
  map.setView([23.022997, 113.56566], 7);
  sateLayer = L.tileLayer('http://162.16.4.12/satellite/{z}/{x}/{y}.jpg', {
    minZoom: 7, // 最小缩放级别※
    maxZoom: 16, // 最大缩放级别※
  }).addTo(map)
  overLayer = L.tileLayer('http://162.16.4.12/overlay/{z}/{x}/{y}.png', {
    minZoom: 7, // 最小缩放级别※
    maxZoom: 16, // 最大缩放级别※
  }).addTo(map)
  map.setMaxBounds([[26.17461, 119.32564], [19.38313, 107.67464]])
  props.mapInit({ addIcon, addCircularArea, addConnection, map })
}

//添加图标
let points = []
const addIcon = (latlng, isFirst = false, icon = 'm2.png') => {
  if (isFirst) {
    if (points.length > 0) {
      points.forEach(item => {
        item.removeFrom(map)
      })
    }
    points = []
  }
  // 点击获取地图上的经纬度
  const marker = L.marker([latlng.lat, latlng.lng], {
    icon: new L.Icon({
      className: "lmap-icon",
      iconUrl: '/imgs/' + icon,
      iconSize: [48, 48],
      iconAnchor: [24, 48],
    })
  }).addTo(map);
  points.push(marker)
  map.fitBounds(points.map(item => item.getLatLng()))
}
// 添加圆形区域
const addCircularArea = (latlng) => {
  L.circle([latlng.lat, latlng.lng], {
    color: '#e2e2e2', //边框颜色
    fillColor: '#e2e2e2', //内部填充颜色
    fillOpacity: 1, //内部的填充透明度
    radius: 500 //圆形的半径
  }).addTo(map);
}
// 添加连线
const addConnection = (coordinates) => {
  sateLayer.setOpacity(0.8)
  overLayer.setOpacity(0.8)
  // 创建折线对象并添加到地图上
  L.polyline(coordinates, {
    color: '#b1ff4d',
    weight: 10,
  }).addTo(map)
}
onMounted(() => {
  initMap()
})
</script>

<template>
  <!-- 地图容器 -->
  <div class="main_map">
    <div id="map"></div>
  </div>
</template>
<style>
* {
  padding: 0;
  margin: 0;
}
</style>
<style lang="scss" scoped>
/* 设置地图容器的高度和宽度 */
.main_map {
  width: 100vw;
  height: 100vh;

  #map {
    width: 100vw;
    height: 100vh;
  }
}
</style>